<template>
  <div class="city">
    <div class="search_wrap">
      <div class="search">
        <i class="fa fa-search"></i>
        <input type="text" placeholder="输入城市名" v-model="input_value" />
      </div>
      <button @click="$router.go(-1)">取消</button>
    </div>
    <div style="height:100%">
      <div class="location">
        <Location :address="city" />
      </div>
      <Alphabet :cityInfo="cityInfo" :keys="keys" />
    </div>
  </div>
</template>
<script>
import Location from "./../components/location.vue";
import Alphabet from "./../components/alphabet.vue";
export default {
  name: "city",
  components: {
    Location,
    Alphabet,
  },
  data() {
    return {
      input_value: "",
      cityInfo: null,
      keys: [],
    };
  },
  computed: {
    city() {
      return (
        this.$store.getters.location.city ||
        this.$store.getters.location.province
      );
    },
  },
  created() {
    this.getCityInfo();
  },
  methods: {
    getCityInfo() {
      this.$axios("https://element-interface.herokuapp.com/api/posts/cities")
        .then((response) => {
          console.log(response.data);
          this.cityInfo = response.data;
          //   console.log(cityInfo);
          this.keys = Object.keys(response.data);
          //   this.keys.pop();
          this.keys.sort();
          //   console.log(this.keys);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style scoped>
</style>